<template>
	<view class="node-config">
		<view class="create-project-form">
			<view class="create-item" v-for="(item, index) in nodeList" :key="index">
				<text class="info-item-title">{{item.subject}}</text>
				<view class="info-item-right-input">
					<view class="info-item-right-text">M {{item.units}}</view>
					<view class="info-item-right-node">{{item.nodeNum}}</view>
				</view>
			</view>
			<!-- <uni-swipe-action>
				<uni-swipe-action-item :right-options="options" v-for="(item, index) in nodeList" :key="index"
					@click="onNodeClick($event, index)">
					<view class="create-item">
						<text class="info-item-title">{{item.subject}}</text>
						<view class="info-item-right-input">
							<view class="info-item-right-text">M</view>
							<view class="info-item-right-units" @click.stop="handleSelectUnits(index)">{{item.units}}
							</view>
							<input class="info-item-input" type="text" v-model="item.nodeNum"
								@change="inputChange(index)">
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action> -->
			<!-- <view class="add-node-box" @click.stop="onAddNode">
				<van-icon class="add-icon" name="plus" />
				<text class="add-text">创建节点</text>
			</view> -->
		</view>
		<!-- <button class="create-btn" @click.stop.prevent="handleSubmit">提交</button> -->

		<!-- units popup -->
		<van-popup :show="unitsPopShow" position="bottom">
			<van-picker show-toolbar :columns="unitsList" @confirm="onUnitsConfirm" @cancel="unitsPopShow = false" />
		</van-popup>
	</view>
</template>

<script>
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				unitsPopShow: false,
				currentUnitsIndex: -1,
				unitsList: ['-', '+'],
				nodeList: [],
			}
		},
		onShow() {
			const wxType = uni.getStorageSync("wxType");
			if (wxType == 'xubao') {
				this.getXubaoNodeList();
			} else if (wxType == 'dingbao') {
				this.getDingbaoNodeList();
			}
		},
		onLoad() {
			getApp().showLoading();
			const wxType = uni.getStorageSync("wxType");
			if (wxType == 'xubao') {
				this.getXubaoNodeList();
			} else if (wxType == 'dingbao') {
				this.getDingbaoNodeList();
			}
		},
		methods: {
			// 获取续保节点
			getXubaoNodeList() {
				apiRqs._getXubaoNodeList().then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						let newData = JSON.parse(JSON.stringify(res.data));
						for (let i = 0; i < newData.length; i++) {
							if (newData[i].node == 0) {
								newData[i].units = "-";
								newData[i].nodeNum = 0;
							} else {
								newData[i].units = newData[i].node.toString().substring(0, 1);
								newData[i].nodeNum = newData[i].node.toString().substring(1, newData[i].node
									.toString()
									.length);
							}

							newData[i].isEdit = false;
						}
						this.nodeList = newData;
						console.log('续保节点', newData);
					} else {
						getApp().showToast(res.msg);
					}
				})
			},
			// 获取定保节点
			getDingbaoNodeList() {
				apiRqs._getDingbaoNodeList().then((res) => {
					uni.hideLoading();
					if (res.code == 200) {
						let newData = JSON.parse(JSON.stringify(res.data));
						for (let i = 0; i < newData.length; i++) {
							if (newData[i].node == 0) {
								newData[i].units = "-";
								newData[i].nodeNum = 0;
							} else {
								newData[i].units = newData[i].node.toString().substring(0, 1);
								newData[i].nodeNum = newData[i].node.toString().substring(1, newData[i].node
									.toString()
									.length);
							}

							newData[i].isEdit = false;
						}
						this.nodeList = newData;
						console.log('定保节点', newData);
					} else {
						getApp().showToast(res.msg);
					}
				})
			},
			// units
			handleSelectUnits(index) {
				this.unitsPopShow = true;
				this.currentUnitsIndex = index;
			},
			// units 确认
			onUnitsConfirm(value) {
				this.nodeList[this.currentUnitsIndex].units = value.detail.value;
				this.nodeList[this.currentUnitsIndex].isEdit = true;
				this.unitsPopShow = false;
			},
			// 新增节点
			onAddNode() {
				uni.navigateTo({
					url: "/packageD/xubao/add-node"
				})
			},
			// 节点删除
			onNodeClick(e, index) {
				const wxType = uni.getStorageSync("wxType");
				console.log(e, index);
				var that = this;
				uni.showModal({
					title: "提示",
					content: `确认删除【${that.nodeList[index].subject}】吗？（删除后不可恢复）`,
					confirmText: "确认",
					confirmColor: "#008aff",
					cancelColor: "#999",
					cancelText: "取消",
					success(res) {
						if (res.confirm) {
							getApp().showLoading();
							apiRqs._deleteNode(that.nodeList[index].id).then((res) => {
								uni.hideLoading();
								if (res.code == 200) {
									getApp().showToast("删除成功", "success");
									if (wxType == 'xubao') {
										that.getXubaoNodeList();
									} else if (wxType == 'dingbao') {
										that.getDingbaoNodeList();
									}

								}
								console.log('删除节点结果', res);
							})
						}
					}
				})
			},
			// 监听节点input修改
			inputChange(index) {
				this.nodeList[index].isEdit = true;
			},
			// 提交节点修改
			handleSubmit() {
				const wxType = uni.getStorageSync("wxType");
				let nodeList = this.nodeList;
				let editList = [];
				for (let i = 0; i < nodeList.length; i++) {
					if (nodeList[i].isEdit) {
						nodeList[i].node = (nodeList[i].units + nodeList[i].nodeNum) * 1;
						editList.push(nodeList[i]);
					}
				}
				console.log('editList', editList);
				if (editList.length == 0) {
					getApp().showToast("未进行修改，请在修改后点击提交");
					return false;
				} else {
					getApp().showLoading();
					let promiseList = [];
					for (let i = 0; i < editList.length; i++) {
						let rqsData = {
							"id": editList[i].id,
							"node": editList[i].node,
							"subject": editList[i].subject
						};
						promiseList.push(new Promise((resolve) => {
							apiRqs._editNode(rqsData).then((res) => {
								resolve(res);
							})
						}))
					}
					Promise.all(promiseList).then((res) => {
						setTimeout(() => {
							uni.hideLoading();
							getApp().showToast("修改成功", "success");
							console.log('全部请求完毕的promise', res);
							if (wxType == 'xubao') {
								this.getXubaoNodeList();
							} else if (wxType == 'dingbao') {
								this.getDingbaoNodeList();
							}
						}, 500)
					})
				}

			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.node-config {
		.create-project-form {
			margin: 20px;

			.add-node-box {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
				color: #666;
				font-size: 12px;
				padding: 15px 16px;
				box-sizing: border-box;
				color: #008aff;
				// border-bottom-left-radius: 4px;
				// border-bottom-right-radius: 4px;

				&:active {
					background-color: #f1f1f1;
				}

				.add-icon {
					font-size: 10px;
					margin-right: 3px;
				}
			}



			.create-item {
				display: flex;
				align-items: center;
				width: 100%;
				border-bottom: 1px solid #f5f5f5;
				background-color: #fff;
				padding: 16px 15px;
				box-sizing: border-box;
				position: relative;

				.info-item-title {
					width: 100px;
					flex: 0 0 100px;
					font-size: 14px;
				}

				.info-item-right-input {
					flex: 1;
					display: flex;
					align-items: center;
					margin-left: 10px;
					justify-content: flex-end;

					.info-item-right-text {
						text-align: right;
						font-size: 14px;
						color: rgba(0, 0, 0, 0.4);
					}
					.info-item-right-node{
						font-size: 14px;
						color: rgba(0, 0, 0, 0.4);
						margin-left: 4px;
					}

					.info-item-right-units {
						width: 30px;
						flex: 0 0 30px;
						height: 30px;
						line-height: 28px;
						font-size: 13px;
						color: rgba(0, 0, 0, 0.4);
						border: 1px solid #f2f2f2;
						margin-left: 6px;
						border-radius: 4px;
						text-align: center;
						padding: 0px 3px;
						box-sizing: border-box;
					}

					.info-item-input {
						width: 30px;
						flex: 0 0 30px;
						height: 30px;
						line-height: 30px;
						font-size: 13px;
						color: rgba(0, 0, 0, 0.4);
						border: 1px solid #f2f2f2;
						margin-left: 3px;
						border-radius: 4px;
						text-align: center;
						padding: 0px 3px;
						box-sizing: border-box;
					}
				}



				.placeholderFontClass {
					color: #ddd;
				}
			}


		}

		.create-btn {
			margin: 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&::after {
				border: none;
			}

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
